<template>
  <el-container style="height: 100%; padding: 0" >
    <el-header id="head">
      <span class="title">RainSpace 图书管理系统</span>
      <el-button style="float: right;margin-top: 0.8em" type="primary" plain @click="jump()">
        登录
      </el-button>
      <span style="float: right">已有账号？</span>
    </el-header>
    <el-main style="margin: 0 25em 0 25em">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="邮箱"  prop="email">
          <el-input v-model="form.email" type="e-mail"></el-input>
        </el-form-item>
        <br />
        <el-form-item  label="密码" prop="password">
          <el-input v-model="form.password" type="password" ></el-input>
        </el-form-item>
        <br />
        <el-form-item  label="确认密码" prop="password1">
          <el-input v-model="form.password1" type="password"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="manage">
          <el-radio-group v-model="form.manage">
            <el-radio label="1">管理员</el-radio>
            <el-radio label="0">普通用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="验证码" prop="verifyCode">
          <el-input v-model="form.verifyCode" style="width: 52%"></el-input>
          <el-button plain style="margin-left: 0.5em" type="warning" @click="verify('form')">
            {{time === 0 ? '发送验证码' : '发送验证码('+time+')'}}
          </el-button>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button plain type="success" @click="submitForm('form')">提交</el-button>
          <el-button plain type="danger" @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'register',
  data () {
    const checkEmail = (rule, value, callback) => {
      let emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (emailReg.test(value) || value === '') {
        return callback()
      } else {
        callback(new Error('邮箱格式错误'))
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        return callback()
      }
    }
    return {
      form: {
        email: '',
        password: '',
        password1: '',
        manage: '',
        verifyCode: ''
      },
      time: 0,
      haveAccount: '',
      checkemail: false,
      rules: {
        email: [{required: true, message: '请输入邮箱', trigger: 'blur'},
          {required: false, validator: checkEmail, trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur'}],
        password1: [{required: true, validator: validatePass, trigger: 'blur'},
          {min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur'}],
        verifyCode: [{required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 6, max: 6, message: '长度为6个字符', trigger: 'blur'}
        ],
        manage: [{required: true, message: '请选择权限', trigger: 'change'}]
      }
    }
  },
  methods: {
    verify: function (formName) {
      if (this.time === 0) {
        this.$refs[formName].validateField('email', valid => {
          this.checkemail = !valid
        })
        if (this.checkemail === false) {
          return
        }
        this.$axios.get('/msg/' + this.form.email).then((res) => {
          if (res.data.flag === true) {
            this.$message.success('验证码发送成功！')
            this.time = 60
            let _this = this
            var interval = setInterval(function () {
              _this.time -= 1
              if (_this.time === 0) {
                clearInterval(interval)
              }
            }, 1000)
          } else {
            this.$message.error(res.data.msg)
          }
        }
        )
      } else {
        this.$message.error('请过' + this.time + '秒后再尝试发送!')
      }
    },
    submitForm: function (formName) {
      let sendCode = false
      this.$refs[formName].validate((valid) => {
        if (valid) {
          sendCode = true
        } else {

        }
      })
      // console.log(sendCode);
      if (sendCode === false) {
        return
      }
      this.$axios.get('/msg/' + this.form.email + '/' + this.form.verifyCode).then((res) => {
        if (res.data.flag === true) {
          this.save()
        } else {
          this.$message.error(res.data.msg)
        }
      }
      )
    },
    resetForm: function (formName) {
      this.$refs[formName].resetFields()
    },
    jump: function () {
      this.$router.push('/')
    },
    save: function () {
      this.$axios.post('/msg/submit', this.form).then((res) => {
        if (res.data.flag === true) {
          this.$message.success('注册成功！即将为您自动跳转到登录页面...')
          setTimeout(this.jump(), 1500)
        } else {
          this.$message.error(res.data.msg)
        }
      }
      )
    }
  }
}

</script>

<style scoped>
#head {
  background-color: #3f51b5;
  color: #fff;
  line-height: 60px;
  box-shadow: 0 0 7px 3px #aaa;
  z-index: 1;
}

.title {
  font-size: 1.2em;
  font-weight: 500;
  padding-left: 0.7em;
}
</style>
